<template>
<el-drawer :model-value="isShow" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly">
  <template #header="{ titleId, titleClass }">
    <div class="zs-drawer-header" :id="titleId" :class="titleClass">
      <div class="zs-icon zs-text-blue zs-space-right-sm">
        <el-icon> <Grid /> </el-icon>
      </div>
      <div class="zs-title zs-text-black">{{ drawerTitle }}</div>
    </div>
  </template>
  <template #default>
    <el-container class="zs-drawer-container">
      <el-scrollbar class="zs-drawer-content">
        <el-form ref="dataForm" :model="formData.data" :rules="formData.rules" label-width="100px">
          <div class="zs-align-center zs-space-bottom" id="detail-drawer-subjectName">
            <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
            <div class="zs-title">{{ curNodeList[0].name }}</div>
          </div>
          <div class="zs-card zs-space-bottom">
            <el-form-item label="计算依据：">
              <el-input 
                disabled
                :value="formData.data.details && formData.data.details.replaceAll('\n','\n\n')" 
                type="textarea" 
                :autosize="{ minRows: 5, maxRows: 5 }" 
              />
            </el-form-item>
            <el-form-item v-for="(monthItem,index) in monthKeyList" :key="monthItem" :label="index == 0 ? '费用合计：' : (index)+'月：'">
              <el-input class="zs-input-group-md" :value="formatArea(formData.data.val[monthItem],2)" disabled>
                <template #append>
                  <div>元</div>
                </template>
              </el-input>
            </el-form-item>
            <div style="text-align: right;">
              <el-button class="zs-link" link size="small" @click="()=>openDetailTableDrawer()">明细</el-button>
            </div>
          </div>
        </el-form>
      </el-scrollbar>
      <hsDocWrapper v-if="isShow" :nodeList="curNodeList"></hsDocWrapper>
    </el-container>
  </template>
  <template v-if="!isReadOnly" #footer>
    <el-button class="zs-btn-md zs-btn-plain" @click="handleClose">关闭</el-button>
  </template>
</el-drawer>
<DetailTableDrawer 
  v-model:isShow="detailTableInfo.isShow"
  :drawerTitle="detailTableInfo.title"
  :courseNameType="detailTableInfo.courseNameType"
  :projectCode="formData.data.projectCode"
  :courseNumber="formData.data.parentNumber"
  :currentYear="currentYear"
  :currentMonth="currentMonth"
/>
</template>

<script setup>
import DetailTableDrawer from './detail-table-drawer.vue';
import { formatArea } from '@/utils/publicUtils'
import { reactive, ref, watch, nextTick } from "vue";
import { useStore } from "vuex";
let store = useStore();
// 定义抽屉大小
const curDrawerSize = ref(store.state.uiDrawerSize);
// 定义抽屉锚点菜单
const curNodeList = ref([
  { name:'科目名称', id:'detail-drawer-subjectName' },
]);
// 抽屉传值
const props = defineProps({
  // 控制是否打开抽屉
  isShow: { type: Boolean, default: false },
  // 抽屉标题
  drawerTitle: { type: String },
  // 是否禁用
  isReadOnly: { type: Boolean },
  // 当前数据
  currentData: { type: Object },
  currentYear: { type: String },
  currentMonth: { type: String },
});
// 监听传值抽屉打开状态
watch(() => props.currentData,
  (newVal) => {
    setFormData(newVal)
});
// 定义更新事件
const emits = defineEmits(["update:isShow"]);
// 关闭抽屉事件
function handleClose() {
  dataForm.value.resetFields()
  emits("update:isShow", false);
}

let monthKeyList = Array(13).fill(0).map((el,index)=>`month${index == 0 ? 'Sum' : index }`)
let dataForm = ref()
let formData = reactive({
  data:{
    val:{}
  }
})

function setFormData(data) {
  curNodeList.value[0].name = data.courseName
  nextTick(()=>{
    formData.data = data
  })
}


let detailTableInfo = reactive({
  title:'',
  isShow:false,
  courseNameType:''
})

function openDetailTableDrawer(){
  detailTableInfo.isShow = true
  detailTableInfo.title = formData.data.courseName
  detailTableInfo.courseNameType = formData.data.type
}
</script>

<style lang="scss" scoped>
</style>
